{include file="common/_header-css"}
{include file="common/_jQuery"}
    <body>
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">部门管理</a>
                <a>
                    <cite>部门分类</cite>
                </a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <hr>
                            <blockquote class="layui-elem-quote"><h2>部门分类</h2></blockquote>
                        </div>
                        <div class="layui-card-header">

                            <form class="layui-form layui-col-space5">
                                <button class="layui-btn" type="button" onclick="xadmin.open('编辑','{:url(\'department\')}?type=1&parent_id=0&level=1',600,400)"><i class="layui-icon"></i>增加顶级栏目</button>
                            </form>
                        </div>
                        <div class="layui-card-body ">
                            <table class="layui-table layui-form">
                                <thead>
                                <tr>
                                    <th width="70">ID</th>
                                    <th>部门名称</th>
                                    <th width="250">操作</th>
                                </thead>
                                <tbody class="x-cate">
                                {volist name="departmentList" id='one'}


                                <tr cate-id='{$one.id}' fid='{$one.parent_id}'>
                                    <td>{$one.id}</td>
                                    <td>
                                        <i class="layui-icon x-show" status='true'>&#xe623;</i>
                                        {$one.department}
                                    </td>
                                    <td class="td-manage">
                                        <button class="layui-btn layui-btn layui-btn-xs"  onclick="xadmin.open('编辑','{:url(\'department\')}?type=2&id={$one.id}&level=1',600,400)" ><i class="layui-icon">&#xe642;</i>编辑</button>
                                        <button class="layui-btn layui-btn-warm layui-btn-xs"  onclick="xadmin.open('添加子栏目','{:url(\'department\')}?type=1&parent_id={$one.id}&level=2',600,400)" ><i class="layui-icon">&#xe642;</i>添加子栏目</button>
                                        <button class="layui-btn-danger layui-btn layui-btn-xs"  onclick="member_del(this,'{$one.id}')" href="javascript:;" ><i class="layui-icon">&#xe640;</i>删除</button>
                                    </td>
                                </tr>

                                {volist name="$one.tree" id="two"}
                                <tr cate-id='{$two.id}' fid='{$two.parent_id}'>
                                    <td>{$two.id}</td>
                                    <td>
                                        &nbsp;&nbsp;&nbsp;&nbsp;
                                        <i class="layui-icon x-show" status='true'>&#xe623;</i>
                                        {$two.department}
                                    </td>
                                    <td class="td-manage">
                                        <button class="layui-btn layui-btn layui-btn-xs"  onclick="xadmin.open('编辑','{:url(\'department\')}?type=2&id={$two.id}&level=2',600,400)" ><i class="layui-icon">&#xe642;</i>编辑</button>
                                        <button class="layui-btn layui-btn-warm layui-btn-xs"  onclick="xadmin.open('添加子栏目','{:url(\'department\')}?type=1&parent_id={$two.id}&level=3',600,400)" ><i class="layui-icon">&#xe642;</i>添加子栏目</button>
                                        <button class="layui-btn-danger layui-btn layui-btn-xs"  onclick="member_del(this,'{$two.id}')" href="javascript:;" ><i class="layui-icon">&#xe640;</i>删除</button>
                                    </td>
                                </tr>
                                {volist name="$two.tree" id="three"}
                                <tr cate-id='{$three.id}' fid='{$three.parent_id}'>
                                    <td>{$three.id}</td>
                                    <td>
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        ├&nbsp;{$three.department}
                                    </td>
                                    <td class="td-manage">
                                        <button class="layui-btn layui-btn layui-btn-xs"  onclick="xadmin.open('编辑','{:url(\'department\')}?type=2&id={$three.id}&level=3',600,400)" ><i class="layui-icon">&#xe642;</i>编辑</button>
                                        <button class="layui-btn layui-btn-warm layui-btn-xs layui-btn-disabled"><i class="layui-icon">&#xe642;</i>添加子栏目</button>
                                        <button class="layui-btn-danger layui-btn layui-btn-xs"  onclick="member_del(this,'{$three.id}')" href="javascript:;" ><i class="layui-icon">&#xe640;</i>删除</button>
                                    </td>
                                </tr>
                                {/volist}

                                {/volist}

                                {/volist}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
          layui.use(['form'], function(){
            form = layui.form;
            
          });

           /*删除*/
          function member_del(obj,id){
              layer.confirm('您确定要删除该部门以及该部门的子部门吗？',function(index){
                  $.post('{:url(\'department/department\')}',{id:id,type:3},function (res) {
                      if (res.code == 200) {
                        $(obj).parents("tr").remove();
                        layer.msg(res.msg,{icon:1,time:1000});
                      }else{
                          layer.msg(res.msg,{icon:5,time:500});
                      }
                  });

              });
          }

          // 分类展开收起的分类的逻辑
          // 
          $(function(){
            $("tbody.x-cate tr[fid!='0']").hide();
            // 栏目多级显示效果
            $('.x-show').click(function () {
                if($(this).attr('status')=='true'){
                    $(this).html('&#xe625;'); 
                    $(this).attr('status','false');
                    cateId = $(this).parents('tr').attr('cate-id');
                    $("tbody tr[fid="+cateId+"]").show();
               }else{
                    cateIds = [];
                    $(this).html('&#xe623;');
                    $(this).attr('status','true');
                    cateId = $(this).parents('tr').attr('cate-id');
                    getCateId(cateId);
                    for (var i in cateIds) {
                        $("tbody tr[cate-id="+cateIds[i]+"]").hide().find('.x-show').html('&#xe623;').attr('status','true');
                    }
               }
            })
          })

          var cateIds = [];
          function getCateId(cateId) {
              $("tbody tr[fid="+cateId+"]").each(function(index, el) {
                  id = $(el).attr('cate-id');
                  cateIds.push(id);
                  getCateId(id);
              });
          }
   
        </script>
    </body>
</html>
